<template>
  <div class="swiper mySwiper" :class="siperName">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.swiper {
  width: 100%;
  height: 100%;
}
</style>

<script>
import Swiper from 'swiper/bundle'
// 引入样式库这个是英文官网复制的 可以去看看在get start  中找到的
import 'swiper/css/bundle'
export default {
  props: {
    perView: {
      default: 1,
      type: Number
    },
    siperName: {
      default: 'swiperName',
      type: String
    }
  },
  mounted () {
    new Swiper('.' + this.siperName, {
      slidesPerView: this.perView,
      freeMode: true
    })
  }
}
</script>
